<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			div {
				width: 100px;
				height: 100px;
				border: 1px solid red;
				margin-bottom: 10px;
			}
			
			div p {
				width: 50px;
				height: 50px;
				background: blue;
				color: white;
			}
		</style>
		<!--引入jQuery-->
		<script src="js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
			//添加事件监听
			$(".box1").click(function(){
				//具体的代码
				$("#box2 p").css("background" , "green");
			});
			
			$(".box1").mouseover(function(){
				$("#box2 p").css("width" , "70px");
			});
			
			$(".box1").mouseout(function(){
				$("#box2 p").css("height" , "70px");
			});
		});
		</script>
	</head>

	<body>
		<div class="box1">

		</div>
		<div id="box2">
			<p>pp</p>

		</div>
	</body>

</html>